<template>
  <Card class="bomCard" id="iframe">
    <div class="bom_box">

     <div class="bom_top">
       <div class="modelurlBox">
         <template>
           <Input v-if="flagStaus" v-model="urlValue"  style="width: 120px" />
           <a class="aurlBox" href="javascript:void(0);" v-else>{{urlValue}}</a>
         </template>
         <Button style="margin-left: 10px;" type="primary" @click="enterClick">{{textStr}}</Button>
       </div>
       <Icon class="icon" type="md-open" color="#2DB7F5" size="32"
             @click="open()"/>
     </div>

      <iframe name="myiframe"
              id="myiframe"
              :src="modelUrl"
              width="100%"
      >
        <div>你的浏览器不支持iframe标签</div>
      </iframe>

    </div>
  </Card>
</template>

<script>
export default {
  name: "bomComponent",
  props:['modelUrl'],
  data() {
    return {
      textStr:"",
      flagStaus:false,
      urlValue:""
    }
  },
  methods: {
    enterClick(){
      this.flagStaus = !this.flagStaus
      if (this.flagStaus){
        this.textStr = `${this.$t('common.Save')}`
      }else {
        this.textStr = `${this.$t('common.Edit')}`
        this.axios({
          method: 'get',
          url: '/dms/dmsDeviceTz/modelEdit',
          params: {
            modelUrl: this.urlValue,
            id: this.$route.query.id
          }
        }).then((res)=>{
          if (res.code === 200) {
            this.$Message.success('保存成功!')
          }
        })
      }
    },
    open() {
      window.open(this.modelUrl);
    }
  },
  mounted() {
    if (this.modelUrl){
      this.urlValue = this.modelUrl
      this.textStr = `${this.$t('common.Edit')}`
      this.flagStaus = false
    }else {
      this.flagStaus = true
      this.textStr = `${this.$t('common.Save')}`
    }
  },
}
</script>

<style scoped lang="scss">
#myiframe {
  height: calc(100vh - 260px);
  width: 100%;
  border: 0;
}

.bomCard {
  height: calc(100vh - 160px);

  .bom_box {
    padding: 0 10px 10px 10px;
    .bom_top{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .modelurlBox{
        a.aurlBox{
          color: #2d8cf0;
          background: 0 0;
          text-decoration: none;
          outline: 0;
          cursor: pointer;
          transition: color .2s ease;
        }
      }
    }
  }

  .icon {
    float: right;
    margin-bottom: 10px;
    cursor: pointer;
  }
}
.demo-spin-icon-load{
  animation: ani-demo-spin 1s linear infinite;
}
</style>
